// webpack 是node写出来的 node写法
let path = require('path')
// console.log(path.resolve(__dirname, 'dist'))
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 压缩css 在模式 mode: 'production' 生效
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 压缩js
let UglifyjsPlugin= require('uglifyjs-webpack-plugin')

module.exports = {
  devServer: { // 开发服务器的配置
    port: 3000,
    progress: true,
    contentBase: './build',
    compress: true
  },
  optimization: { // 优化项 在生产环境
    minimizer: [
      new UglifyjsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true
      }),
      new OptimizeCSSAssetsPlugin({})
    ]
  } ,
  mode: 'development', // 模式 默认两种 production development
  entry: './src/index.js', // 入口
  output: {
    filename: 'bundle.[hash:8].js', // 打包后的文件名
    path: path.resolve(__dirname, 'build'), // 路径必须是一个绝对路径, __dirname当前目录
  },
  plugins: [ // 数组 放着所有的webpack插件
    new HtmlWebpackPlugin({
      // 模板
      template: './src/index.html',
      // 打包后文件
      filename: 'index.html',
      // 压缩文件
      minify: {
        // 去掉双引号
        removeAttributeQuotes: true,
        // 开启一行
        collapseWhitespace: true
      },
      // 打包出来的文件加hash戳
      hash: true
    }),
    new MiniCssExtractPlugin({
      filename: 'main.css'
    })
  ],
  module: { // 模块
    rules: [ // 规则 css-loader 接续@import这种语法的
      // style-loader 他是把css 插入的head的标签中
      // loader的特点 希望单一
      // loader的用法 字符串只用一个loader
      // 多个loader需要[]
      // loader的顺序 默认是从右到左 从下到上
      // loader还可以写成 对象方式
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: { // 用babel-loader  需要把es6->es5 presets大集合
            presets: [
              '@babel/preset-env'
            ],
            plugins: [
              ["@babel/plugin-proposal-decorators", {"legacy": true}],
              ["@babel/plugin-proposal-class-properties", {"loose": true}]
            ]
          }
        } 
      },
      { 
        // 可以处理less文件
        test: /\.css$/, 
        use:[
          // MiniCssExtractPlugin(抽离成一个文件main.css) 替换 以下代码
          // {
          //   loader: 'style-loader',
          //   options: {
          //     // 把这些放head在最顶 4.4版本以上的是insert， 而不是insertAt
          //     insert: 'top',
          //     injectType: 'singletonStyleTag', // 将所有的style标签合并成一个
          //   }
          // },
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
        ]
      },
      { 
        // 可以处理less文件
        // sass node-sass  sass-loader
        // stylus stylus-loader
        test: /\.less$/, 
        use:[
          // {
          //   loader: 'style-loader',
          //   options: {
          //     // 把这些放在最顶
          //     insert: 'top'
          //   }
          // },
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'less-loader'
        ]
      }
    ]

  }
}